<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css.css" />
	</head>
	<body>
		<div class="banner">
			
			<div class="logo"><img src='baidu.jpg' height="70"/>
				</div>
		<ul>
			<li><a href="#">导航链接一</a></li>
			<li><a href="#">导航链接二</a></li>
			<li><a href="#">导航链接三</a></li>
			<li><a href="#" class="b">导航链接四</a></li>
		</ul></div>
		<div class="c"><article>
		 <h2>文章的一级标题</h2>
		 <h3>文章的二级标题</h3>
		<span>文章作者  </span>
		<span>文章发表时间</span>
		</article>
		<p>这是一个很长的段落 这是一个很长的段落
		这是一个很长的段落 这是一个很长的段落这是一个很长的段落这是一个很长的段落
		这是一个很长的段落<br />换行了<br />
		这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落
		这是一个很长的段落这是一个很长的段落这是一个很长的段落 这是一个很长的段落
		这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落
		<a href="#" >这一个链接</a>   这是一个很长的段落这是一个很长的段落
		这是一个很长的段落这是一个很长的段落这是一个很长的段落
		这是一个很长的段落这是一个很长的段落这是一个很长的段落
		这是一个很长的段落这是一个很长的段落这是一个很长的段落
		这是一个很长的段落这是一个很长的段落这是一个很长的段落</p>
		<img src="tupian.png" />
		<p>这是一个很长的很长的段落
		这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落
		这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落
		 <a href="www.baidu.com">这是一个百度链接</a>一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落
		这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落
		这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落这是一个很长的很长的段落</p>
		</div>
		
		<div class="c">
        <h2>另一篇文章一级标题</h2>
        <h3>文章二级标题</h3>
           <p><span>文章作者</span>
              <span>文章发表时间</span>
           </p>
    <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
        这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 
        这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 
        <br>换行了<br>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落，
        这是一个很长的段落 这是一个很长的段 ，<a href="http://www.baidu.com">这是一个百度链接 </a>这是一个
        很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 
</p>
<img src="tupian.png" />
		<ul>
			<li>列表项目一</li>
			<li>列表项目二</li>
			<li>列表项目三</li>
		</ul></div>
		
		
		<div class="c">
			<h2>图片</h2>
		
		<figure id="image">
			<div style="border: ;"><figcaption>图片一</figcaption>
			<img src="tupian.png" alt="狐狸" /></div>
			<div><figcaption>图片二</figcaption>
			<img src="tupian.png" alt="狐狸" /></div>
			<div><figcaption>图片三</figcaption>
			<img src="tupian.png" alt="狐狸" /></div>
			<div><figcaption>图片四</figcaption>
			<img src="tupian.png" alt="狐狸" /></div>
			<div><figcaption>图片五</figcaption>
			<img src="tupian.png" alt="狐狸" /></div>
			<div><figcaption>图片六</figcaption>
			<img src="tupian.png" alt="狐狸" /></div>
		</figure>
		</div>
		
		<div class="c">	<article>
				<h2>最后一篇文章的一级标题</h2>
				<span>文章的作者</span>
				<span>时间</span>
				<ol>
					<li>排名一</li>
					<li>排名二</li>
					<li>排名三</li>
					<li>排名四</li>
				</ol>
				<p>下面是个表格</p>
				<table class="table">
					<thead>
						<tr><th>表头</th><th>表头</th><th>表头</th></tr>
					</thead>
					<tbody>
						<tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
						<tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
						<tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
					</tbody><tfoot>
					<tr> <td>总计</td> <td colspan="2"> 1000</td></tr>
					</tfoot>
					</table>
					</div>
						<nav class="c">
							<h1>这是一个侧栏,这是侧栏标题</h1>
							
						<form action="#" method="post" id="form">
							<label for="email" class="foem-a" >请输入邮箱地址:</label>
							<input type="email" name="email" id="email" value="" /><br />
							<p class="form-b">按照邮箱格式输入</p>
							<label class="foem-a" for="password"> 请输入密码：</label> <input  id="password" name="password"/><br/> 
							<br />
							<label class="foem-a" for="password"> 请在输入密码：</label> <input  id="password" name="password"/>
							<p class="form-b">密码是1--10的数字</p>
							<span class="foem-a">性别：</span>
							<label>男:<input type="radio" name="nan" /></label>
							<label>女:<input type="radio" name="nv" /></label><br />
								<label><span class="foem-a">城市：<span/>
									<select>
										<option value="上海">上海</option>
										<option value="郑州">郑州</option>
										<option value="广州">广州</option>
									</select></label><br />
									  <span class="foem-a">爱好：</span>
                			<label><input type="checkbox" name="checkbox" value="运动">运动</label>
                 			<label><input type="checkbox" name="checkbox" value="艺术">艺术</label>
  							<label><input type="checkbox" name="checkbox" value="科学">科学</label><br />
							<label>个人描述：<textarea rows="2" cols="50" value="shihaojun"></textarea><br/>
								
               				</label>
							<button class="submit" type="submit">确认提交</butto>
								</form>
							
							
								
							
							
							
							
						</nav>
					
			</article>
		                    <footer>
							<p>版权所有&copy;</p>
							</footer>
	   </body>
</html>
